<template>
    <div class="content" style="width:1140px;">
    <i class="iconfont icon-num-six bgNum"></i>
    <div class="process-box">
        <ul class="one">
          <li>
          </li>
          <li style="margin-left: -145px;">
            <div class="box boxa"></div>
            <div class="box boxb"></div>
            <div class="texta">
                <i class="iconfont icon-logo-vs num"></i>
                <p class="title">VS Code</p>
            </div>
            <div class="textb">
              <div class="mengban"></div>
              <div class="desc">
                Visual Studio Code是微软发布的文本编辑器，功能非常强大，界面简洁明晰、操作方便快捷。
                <a href='https://code.visualstudio.com/' target="_blank" class="toUrl">下载安装</a>
              </div>
            </div>
          </li>
          <li>
            <div class="box boxa"></div>
            <div class="box boxb"></div>
            <div class="texta">
                <i class="iconfont icon-logo-hb num"></i>
                <p class="title">HBuilder</p>
            </div>
            <div class="textb">
              <div class="mengban"></div>
              <div class="desc">
                HBuilder专为前端打造的开发工具,最全的语法库和浏览器兼容数据、保护眼睛的绿柔设计等特点。
                <a href='http://www.dcloud.io/' target="_blank" class="toUrl">下载安装</a>
              </div>
            </div>
          </li>
          <li>
            <div class="box boxa"></div>
            <div class="box boxb"></div>
            <div class="texta">
                <i class="iconfont icon-logo-st num"></i>
                <p class="title">Sublime Text</p>
            </div>
            <div class="textb">
              <div class="mengban"></div>
              <div class="desc">
                Sublime Text 是代码编辑器，也是HTML和散文的文本编辑器，具有漂亮的用户界面和强大的功能。
                <a href='http://www.sublimetext.com/' target="_blank" class="toUrl">下载安装</a>
              </div>
            </div>
          </li>
          <li style="margin-left: -145px;">
          </li>
        </ul>
        <ul class="two">
          <li>
            <div class="box boxa"></div>
            <div class="box boxb"></div>
            <div class="texta">
                <i class="iconfont icon-logo-dw num"></i>
                <p class="title">Dreamweaver</p>
            </div>
            <div class="textb">
              <div class="mengban"></div>
              <div class="desc">
                DREAMWEAVER最早的“网页三剑客”之一，它使用所见即所得的接口，亦有HTML编辑的功能。
                <a href='https://www.adobe.com/cn/products/dreamweaver.html' target="_blank" class="toUrl">下载安装</a>
              </div>
            </div>
          </li>
          <li>
            <div class="box boxa"></div>
            <div class="box boxb"></div>
            <div class="texta">
                <i class="iconfont icon-logo-ws num"></i>
                <p class="title">WebStorm</p>
            </div>
            <div class="textb">
              <div class="mengban"></div>
              <div class="desc">
                WebStorm被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”等。
                <a href='https://www.jetbrains.com/webstorm/' target="_blank" class="toUrl">下载安装</a>
              </div>
            </div>
          </li>
          <li>
            <div class="box boxa"></div>
            <div class="box boxb"></div>
            <div class="texta">
                <i class="iconfont icon-logo-ps num"></i>
                <p class="title">PS</p>
            </div>
            <div class="textb">
              <div class="mengban"></div>
              <div class="desc">
                Photoshop主要处理以像素所构成的数字图像。众多的编修绘图工具，可以有效进行图片编辑工作。
                <a href='https://www.adobe.com/cn/products/cs6/photoshop.html' target="_blank" class="toUrl">下载安装</a>
              </div>
            </div>
          </li>
          <li>
            <div class="box boxa"></div>
            <div class="box boxb"></div>
            <div class="texta">
                <i class="iconfont icon-logo-ai num"></i>
                <p class="title">AI</p>
            </div>
            <div class="textb">
              <div class="mengban"></div>
              <div class="desc">
                矢量图形处理工具，应用于海报书籍排版，专业插画，多媒体图像处理和互联网页面的制作。
                <a href='https://www.adobe.com/cn/products/cs6/illustrator.html' target="_blank" class="toUrl">下载安装</a>
              </div>
            </div>
          </li>
        </ul>

        <ul class="one">
          <li></li>
          <li style="margin-left: -145px;">
            <div class="box boxa"></div>
            <div class="box boxb"></div>
            <div class="texta">
                <i class="iconfont icon-logo-rp num"></i>
                <p class="title">Axure RP</p>
            </div>
            <div class="textb">
              <div class="mengban"></div>
              <div class="desc">
                Axure RP作为专业原型设计工具，能快速创建应用的线框图、流程图、原型和规格说明文档。
                <a href='https://www.axure.com/' target="_blank" class="toUrl">下载安装</a>
              </div>
            </div>
          </li>
          <li>
            <div class="box boxa"></div>
            <div class="box boxb"></div>
            <div class="texta">
                <i class="iconfont icon-logo-sk num"></i>
                <p class="title">Sketch</p>
            </div>
            <div class="textb">
              <div class="mengban"></div>
              <div class="desc">
                Sketch是MAC上一个强大、创新、易使用的矢量绘图软件，提供功能强大的矢量绘图和文字工具。
                <a href='https://www.sketchapp.com/' target="_blank" class="toUrl">下载安装</a>
              </div>
            </div>
          </li>
          <li>
            <div class="box boxa"></div>
            <div class="box boxb"></div>
            <div class="texta">
                <i class="iconfont icon-logo-px num"></i>
                <p class="title">PxCook</p>
            </div>
            <div class="textb">
              <div class="mengban"></div>
              <div class="desc">
                PxCook优点在于将标注、切图设计后集成在一个软件内完成，包括：长度、颜色、文字注释。
                <a href='http://www.fancynode.com.cn/pxcook' target="_blank" class="toUrl">下载安装</a>
              </div>
            </div>
          </li>
          <li style="margin-left: -145px;"></li>
        </ul>
  </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
            }
        },
        created(){
        },
        methods:{
        }
    }
</script>
<style lang="scss">
  @import "./../../assets/css/color.scss";
  .process-box{
    width: 100%;
    height:450px;
    margin-top: -30px;
    ul{
      width:1140px;
      .two li{margin-top:-40px;}
      li{
        width: 196px;height: 196px;float: left;cursor: pointer;
        position: relative;margin-right: 89px;
        .box{
          position: absolute;
          width: 196px;height: 196px;transform:rotate(45deg);
          border:1px solid #ddd;margin-top: 42px;margin-left: 42px;
        }
        .boxa{top: 0;left: 0;z-index: 1;border: 1px solid $green;opacity: .1;}
        .boxb{left: 10px;top: 0px;z-index: 2;border: 1px solid $green;
            // background-image:linear-gradient(#3d464b,#6b7e84);
            background-image: url('../../assets/img/bg.png');
        }
        .texta{ 
          width: 276px; height: 276px; text-align:center;z-index: 3; position: absolute; left: 7px; top:2px;
          .num{ margin-top:50px; font-size:90px; color: $green; display: inline-block;}
          .title{ font-size:20px; color: $green; }
        }
        .textb{ 
          width: 276px; height: 276px; z-index:4; position: absolute; left: 5px; top: 0px; display: none; 
          .mengban{
            border:1px solid $duck_green;position: absolute;z-index:1;width:196px;height:196px;
            transform:rotate(45deg); background: $duck_green;margin-top:42px;margin-left:47px;
          }
          .desc{
            position:absolute; z-index:2; width:160px;top:85px;left:60px;font-size:14px; color: #fff; text-align:center; line-height:24px;
            .toUrl{
              display: table; margin:10px auto;padding:2px 10px;border:1px dashed #ffffff;border-radius:5px;color:#ffffff;
              &:hover{
                background:#ffffff;color:$duck_green;
              }
            }
          }
        }
        &:hover .textb{
          animation: flipInX .8s;
          // animation:jackInTheBox .5s;
          display: block;
        }
      }
    }
  }
</style>